<template>
  <div>
    <h2>销售总量</h2>
    <div id="one" class="chart"></div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
export default {
  name: "ItenmOne",
  setup() {
    //  inject 开始使用这些数据
    let $echarts = inject("echarts");
    let $axios = inject("axios");

    let data = reactive({});
    let xdata = reactive([]);
    let ydata = reactive([]);
    function setData() {
      xdata = data.data.data.chartData.map(v => v.title);
      ydata = data.data.data.chartData.map(v => v.num);
    }

    async function getData() {
      data = await $axios(`/one/data`);
    }

    onMounted(() => {
      let myEchart = $echarts.init(document.getElementById("one"));
      getData().then(() => {
        setData();

        myEchart.setOption({
          grid: {
            top: "3%",
            left: "2%",
            right:"6%",
            bottom:"12%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: {
            type: "category",
            data: xdata,
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          series: [
            {
              data: ydata,
              type: "bar",
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 20, 20, 0],
                  color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "#005eaa"
                    },
                    {
                      offset: 0.5,
                      color: "#339ca8"
                    },
                    {
                      offset: 1,
                      color: "#cda819"
                    }
                  ])
                }
              }
            }
          ]
        });
        // 让echarts图表自适应
        window.addEventListener("resize", () => {
          myEchart.resize();
        });
      });
    });
    return { getData, data, xdata, ydata, setData };
  }
};
</script>

<style scoped lang="less">
h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  color: #fff;
  font-size: 0.25rem;
  text-align: center;
}
.chart {
  height: 4.5rem;
}
</style>
